<script setup>
import { ref } from 'vue';
</script>
<template>
  <h2>基本语法01：Syntax01.vue</h2>
  <p>Counter0：{{counter0}}</p>
  <p>Counter2：{{counter2}}</p>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">
      点击事件
    </div>
    <div  class="zhtt-demo-card-body">
      <p>
        Counter1：{{counter1}}<br/>
        <button type="button" @click="updateCounter1()" class="zhtt-btn">点击事件：更新counter1的值</button><br/><br/>
        <button type="button" v-on:click="updateCounter1" class="zhtt-btn">点击事件：更新counter1的值</button>
      </p>
    </div>
    <div class="zhtt-demo-card-footer">
      语法：@click="updateCounter1()"<br/>
      语法：v-on:click="updateCounter1"
    </div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">
      绑定属性title
    </div>
    <div  class="zhtt-demo-card-body">
      <p v-bind:title="counter1">绑定属性title，</p>
    </div>
    <div class="zhtt-demo-card-footer">
      语法：v-bind:title="counter1"
    </div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">
      处理用户输入
    </div>
    <div  class="zhtt-demo-card-body">
      <input v-model="counter1" class="zhtt-input">
      <p>counter1：{{counter1}}</p>
    </div>
    <div class="zhtt-demo-card-footer">
      语法：&lt;input v-model="counter1"&gt;
    </div>
  </div>
</template>
<script>
const counter0 = ref('counter0');
let counter2 = 'counter2';
const timer  = setTimeout(()=>{
  clearTimeout(timer);
  counter2 = Math.random();
},2000);

export default {
  data() {
    return {
      counter1: 'counter1',
    }
  },
  methods: {
    updateCounter1(){
      this.counter1 = Math.random();
    }
  }
}
</script>